<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wall {
            width: 300px;
            height: 500px;
            margin: 100px auto;
            border: 1px solid #333;
            position: relative;
        }

        .plane {
            width: 50px;
            height: 50px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wall">
        <div class="plane"></div>
    </div>
</body>
<script>
    // 需求: 通过按键控plane在wall中移动?
    // 1. 按下的键位 (上下左右)
    //    左    ← 37   a 65
    //    上    ↑ 38   w 87 
    //    右    → 39   d 68
    //    下    ↓ 40   s 83

    // 2. 如何控制plane移动 => 定位
    //    每次按下按键 => plane自当前位置水平/垂直移动

    // 缺点: 没有办法斜着跑, 移动的频率 => 事件触发的频率



    var wall = document.getElementsByClassName("wall")[0];
    var plane = document.getElementsByClassName("plane")[0];

    var maxLeft = wall.clientWidth - plane.clientWidth;
    var maxTop = wall.clientHeight - plane.clientHeight;

    var isLeftPress = false;
    var isUpPress = false;
    var isDownPress = false;
    var isRightPress = false;

    document.onkeydown = function (e) {
        var e = e || window.event;
        var keyCode = e.which || e.keyCode;
        console.log(keyCode);

        switch (keyCode) {
            // 左
            case 37:
            case 65:
                isLeftPress = true;
                break;
            // 上
            case 38:
            case 87:
                isUpPress = true;
                break;
            // 右
            case 39:
            case 68:
                isRightPress = true;
                break;
            // 下
            case 40:
            case 83:
                isDownPress = true;
                break;
        }

        console.log(isLeftPress, isUpPress, isRightPress, isDownPress);

    }
    document.onkeyup = function () {
        var e = e || window.event;
        var keyCode = e.which || e.keyCode;
        console.log(keyCode);

        switch (keyCode) {
            // 左
            case 37:
            case 65:
                isLeftPress = false;
                break;
            // 上
            case 38:
            case 87:
                isUpPress = false;
                break;
            // 右
            case 39:
            case 68:
                isRightPress = false;
                break;
            // 下
            case 40:
            case 83:
                isDownPress = false;
                break;
        }
    }

    var timer = setInterval(function () {
        if (isLeftPress || isUpPress || isRightPress || isDownPress) {
            move();
        }
    }, 2);

    function move() {
        // plane当前位置
        var x = plane.offsetLeft;
        var y = plane.offsetTop;

        var speed = 2;

        if (isLeftPress) {
            x -= speed;
        }
        if (isUpPress) {
            y -= speed;
        }
        if (isRightPress) {
            x += speed;
        }
        if (isDownPress) {
            y += speed;
        }

        if (x < 0) x = 0;
        if (x >= maxLeft) x = maxLeft;
        if (y < 0) y = 0;
        if (y >= maxTop) y = maxTop;

        plane.style.left = x + "px";
        plane.style.top = y + "px";
    }



</script>

</html>